<template>
	<view>
		<!-- 标签 -->
		<uni-collapse v-if="tags">
			<uni-collapse-item :title="tags[current].cate_name" :open="open">
				<uni-tag
					style="margin-left: 10rpx;"
					v-for="(item, index) in tags"
					:key="index"
					:text="item.cate_name"
					:type="current == index ? 'warning' : 'default'"
					@click="doCheck(index)"
				></uni-tag>
			</uni-collapse-item>
		</uni-collapse>
		<!-- 宫格布局 列表 -->
		<view>
			<uni-grid
				:column="3"
				:square="false"
				:showBorder="false"
				:highlight="false"
			>
				<uni-grid-item v-for="(item, index) in my_cates" :key="index">
					<view
						style="margin: 10rpx;"
						hover-class="active"
						@click="goRooms(index)"
					>
						<image
							style="width: 100%;height: 300rpx; border-radius: 6rpx;"
							:src="item.pic_url"
							mode=""
						></image>
						<view>{{ item.tag_name }}</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tags: null,
			current: 0,
			open: false,
			cates: null
		};
	},
	mounted() {
		this.getTags();
	},
	methods: {
		// 跳转到房间列表
		goRooms(index){
			const {short_name,tag_name} = this.cates[index];
			uni.navigateTo({
				url: `/pages/rooms/rooms?short_name=${short_name}&tag_name=${tag_name}`,
			})
		},
		// 获取具体分类
		getCate(index) {
			const shortName = this.tags[index].short_name;
			// #ifndef H5
			const url = 'https://capi.douyucdn.cn/api/v1/getColumnDetail';
			// #endif
			// #ifdef H5
			const url = '/capi/api/v1/getColumnDetail';
			// #endif
			uni.request({
				url,
				method: 'GET',
				data: { shortName },
				success: res => {
					console.log(res);
					this.cates = res.data.data;
				},
				fail: () => {},
				complete: () => {}
			});
		},
		// 点击切换
		doCheck(index) {
			this.current = index;
			this.open = true;
			this.$nextTick(() => {
				this.open = false;
				this.getCate(index);
			});
		},
		// 获取标签
		getTags() {
			// #ifndef H5
			const url = 'http://capi.douyucdn.cn/api/v1/getColumnList';
			// #endif
			// #ifdef H5
			const url = '/capi/api/v1/getColumnList';
			// #endif
			uni.request({
				url,
				method: 'GET',
				data: {},
				success: res => {
					// console.log(res);
					this.tags = res.data.data;
					this.getCate(0);
				},
				fail: () => {},
				complete: () => {}
			});
		}
	},
	computed: {
		my_cates() {
			if (this.cates) {
				return this.cates.slice(0, 60);
			}
		}
	}
};
</script>

<style></style>
